<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>axios请求别名</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>axios请求别名</h1>
<button id="getBtn">get</button>
<button id="postBtn">post</button>
<button id="putBtn">put</button>
<button id="deleteBtn">delete</button>

<script>

  const getBtn = document.querySelector('#getBtn')
  const postBtn = document.querySelector('#postBtn')
  const putBtn = document.querySelector('#putBtn')
  const deleteBtn = document.querySelector('#deleteBtn')
  //get
  getBtn.onclick =async function () {
    const re = await axios.get(
      '/getAxios',
      {
        params: {
          userId:'001'
        }
      }
    )
    console.log('get',re.data)
  }
  //post
  postBtn.onclick =async function () {
    const re = await axios.post(
      '/postData',
      {
        name:'万登豪',
        sex:'男',
        age:18
      }
    )
    console.log('post',re.data.data)
  }
  //put
  putBtn.onclick =async function () {
    const re = await axios.put(
      '/putAxios',
      {
        name:'万登豪',
        sex:'男',
        age:18
      }
    )
    console.log('put',re.data)
  }
  //delete
  deleteBtn.onclick =async function () {
    const id = prompt('请输入你想要删除的ID号')
    const re = await axios.delete(
      '/deleteAxios',
      {
        params: {
          userId:id
        }
      }
    )
    console.log('delete',re.data)
  }
</script>

</body>
</html>